<include file="header" />
<script type="text/javascript" src="__APP__/js/jquery.event.drag-1.5.min.js"></script>
<script type="text/javascript" src="__APP__/js/jquery.touchSlider.js"></script>
<style type="text/css">
    .focus{border-bottom:1px solid #eee;position: relative;}
    .main_image img{max-width: 100%;}
    .main_image ul{width: 100%;padding: 0;margin: 0;}
    div.flicking_con {position: absolute;bottom: 1em;left: 0;z-index: 999;width: 100%;height: 21px;text-align: center;}
    .flicking_con i {;padding: 5px;background:rgba(255,255,255,0.5);border-radius: 50%;margin: 0 5px;display: inline-block;}
    .flicking_con i.on {color: #fff;background: #fff;}

</style>
<div id="content">
    <nosession name="mid">
        <menu id="publicmenu">
            <div class="pure-menu pure-menu-open">
                <ul>
                    <li class="pure-menu-selected">
                        <a href="{:U('w3g/Public/home')}">
                            <div class="sidebar-ico sidebar-home"></div>
                            <div>广场</div>
                        </a>
                    </li>
                    <li>
                        <a href="{:U('w3g/Public/login')}">
                            <div class="sidebar-ico sidebar-login"></div>
                            <div>登录</div>
                        </a>
                    </li>
                    <li>
                        <a href="{:U('w3g/Public/register')}">
                            <div class="sidebar-ico sidebar-register"></div>
                            <div>注册帐号</div>
                        </a>
                    </li>
                    <li>
                        <a href="{:U('w3g/Public/about')}">
                            <div class="sidebar-ico sidebar-about"></div>
                            <div>关于我们</div>
                        </a>
                    </li>
                </ul>
            </div>
        </menu>
    </nosession>
    <div id="home" class="panel pure-form pure-form-stacked ts-padding20" selected="true" data-footer="none" data-menu="publicmenu" data-load="$.ui.squareContainer();">
    <!-- 下载手机客户端 -->
    <!-- <div id="app-down-box" class="app-down-box">
        <div class="app-down">
            <a class="ico-close2 ts-listen" data-listen="weibo-remove-click" data-for="app-down-box" href="javascript:;"></a>
            下载客户端，发现更多精彩
        </div>
    </div> -->
    <!--焦点图-->
    <div class="focus">
        <div class="flicking_con">
            <i class=""></i>
            <i class=""></i>
            <i class=""></i>
        </div>
        <div class="main_image">
            <ul style="width: 100%; overflow: visible;">
                <li style="float: none; display: block; position: absolute; top: 0px; left: -5760px; width: 1920px;">
                    <img src="__APP__/images/1.jpg" class="focus-img"/>
                </li>
                <li style="float: none; display: block; position: absolute; top: 0px; left: -5760px; width: 1920px;">
                    <img src="__APP__/images/2.png" class="focus-img"/>
                </li>
                <li style="float: none; display: block; position: absolute; top: 0px; left: -5760px; width: 1920px;">
                    <img src="__APP__/images/3.jpg" class="focus-img"/>
                </li>
            </ul>
        </div>
    </div>
        <!-- 外层画布 -->
        <style>
            #canvas li,#canvas ul{
                list-style: none;
                margin: 0;
                padding: 0;
                height: auto;
                overflow: hidden;
            }
            /* 使得图片居中 webkit-box */
            #canvas li{
                position: absolute;
                display: -webkit-box;
                -webkit-box-pack: center;
                -webkit-box-align: center;
            }
            #canvas li img {
                max-width: 100%;
                max-height: 100%;
            }
            /* 隐藏画布外的内容 */
            #canvas{
                height: auto;
                /*width: 100%;*/
                overflow: hidden;
                background: #f8f8f8;
                box-shadow: inset 0 -2px 15px rgba(0,0,0,0.1);
            }
        </style>
        <div id="canvas"></div>
		<script type="text/javascript">
			var list = [];
		</script>
        {:Addons::hook('show_ad_space', array('place'=>'w3g_home_top'))}
        <script type="text/javascript">
        //构造函数
        function Slider(opts){
            //构造函数需要的参数
            this.wrap = opts.dom;
            this.list = opts.list;
			if(!this.list.length){
				return;
			}
            //构造三步奏
            this.init();
            this.renderDOM();
            this.bindDOM();
        }

        //第一步 -- 初始化
        Slider.prototype.init = function() {
            //设定窗口比率
            this.radio = window.innerHeight/window.innerWidth;
            //设定一页的宽度
            this.scaleW = window.innerWidth;
            //设定初始的索引值
            this.idx = 0;
        };

        //第二步 -- 根据数据渲染DOM
        Slider.prototype.renderDOM = function(){
            var wrap = this.wrap;
            var data = this.list;
            var len = data.length;

            this.outer = document.createElement('ul');
            this.indexTip = document.createElement('div');
            this.indexTip.className = 'picview_indextip';
            //根据元素的
            for(var i = 0; i < len; i++){
                var li = document.createElement('li');
                var item = data[i];
                li.style.width = window.innerWidth +'px';
                li.style.webkitTransform = 'translate3d('+ i*this.scaleW +'px, 0, 0)';
                if(item){
                    //根据窗口的比例与图片的比例来确定
                    //图片是根据宽度来等比缩放还是根据高度来等比缩放
                    if(item['height']/item['width'] > this.radio){
                        if(item['url']){
                            li.innerHTML = '<a href="'+item['url']+'" target="_blank"><img height="'+ window.innerHeight +'" src="'+ item['img'] +'"></a>';
                        }else{
                            li.innerHTML = '<img height="'+ window.innerHeight +'" src="'+ item['img'] +'">';
                        }
                    }else{
                        if(item['url']){
                            li.innerHTML = '<a href="'+item['url']+'" target="_blank"><img width="'+ window.innerWidth +'" src="'+ item['img'] +'"></a>';
                        }else{  
                            li.innerHTML = '<img width="'+ window.innerWidth +'" src="'+ item['img'] +'">';
                        }
                    }
                }
                this.outer.appendChild(li);
                //add Index tip
                var tip = document.createElement('div');
                tip.className = 'picview_indextipitem_'+i;
                this.indexTip.appendChild(tip);
            }

            //UL的宽度和画布宽度一致
            this.outer.style.cssText = 'width:' + this.scaleW +'px';

//            wrap.style.height = window.innerHeight + 'px';
            //调整picview-indextip宽度
            this.indexTip.style.marginLeft = '-'+len * 9+'px';
            this.indexTip.style.width = len*18+'px';
            wrap.style.height = '200px';
            wrap.appendChild(this.outer);
            wrap.appendChild(this.indexTip);
            $($('.picview_indextip>div').get(0)).addClass('active');
            //开始自动轮播
            this.startSetInterval(5000);

        };

        Slider.prototype.goIndex = function(n){
            var idx = this.idx;
            var lis = this.outer.getElementsByTagName('li');
            var len = lis.length;
            var cidx;

            //如果传数字 2,3 之类可以使得直接滑动到该索引
            if(typeof n == 'number'){
                cidx = idx;
                //如果是传字符则为索引的变化
            }else if(typeof n == 'string'){
                cidx = idx + n*1;
            }

            //当索引右超出
            if(cidx > len-1){
                cidx = len - 1;
                //当索引左超出
            }else if(cidx < 0){
                cidx = 0;
            }

            //保留当前索引值
            this.idx = cidx;

            //改变过渡的方式，从无动画变为有动画
            lis[cidx].style.webkitTransition = '-webkit-transform 0.2s ease-out';
            lis[cidx-1] && (lis[cidx-1].style.webkitTransition = '-webkit-transform 0.2s ease-out');
            lis[cidx+1] && (lis[cidx+1].style.webkitTransition = '-webkit-transform 0.2s ease-out');

            //改变动画后所应该的位移值
            lis[cidx].style.webkitTransform = 'translate3d(0, 0, 0)';
            lis[cidx-1] && (lis[cidx-1].style.webkitTransform = 'translate3d(-'+ this.scaleW +'px, 0, 0)');
            lis[cidx+1] && (lis[cidx+1].style.webkitTransform = 'translate3d('+ this.scaleW +'px, 0, 0)');

            //提示变化
            $('.picview_indextip>div').removeClass('active');
            $($('.picview_indextip>div').get(cidx)).addClass('active');
        };

        //第三步 -- 绑定 DOM 事件
        Slider.prototype.bindDOM = function(){
            var self = this;
            var scaleW = self.scaleW;
            var outer = self.outer;
            var len = self.list.length;

            //手指按下的处理事件
            var startHandler = function(evt){

                //记录刚刚开始按下的时间
                self.startTime = new Date() * 1;

                //记录手指按下的坐标
                self.startX = evt.touches[0].pageX;

                //清除偏移量
                self.offsetX = 0;

                //事件对象
                var target = evt.target;
                while(target.nodeName != 'LI' && target.nodeName != 'BODY'){
                    target = target.parentNode;
                }
                self.target = target;

            };

            //手指移动的处理事件
            var moveHandler = function(evt){
                //兼容chrome android，阻止浏览器默认行为
                evt.preventDefault();

                //计算手指的偏移量
                self.offsetX = evt.targetTouches[0].pageX - self.startX;

                var lis = outer.getElementsByTagName('li');
                //起始索引
                var i = self.idx - 1;
                //结束索引
                var m = i + 3;

                //最小化改变DOM属性
                for(i; i < m; i++){
                    lis[i] && (lis[i].style.webkitTransition = '-webkit-transform 0s ease-out');
                    lis[i] && (lis[i].style.webkitTransform = 'translate3d('+ ((i-self.idx)*self.scaleW + self.offsetX) +'px, 0, 0)');
                }
            };

            //手指抬起的处理事件
            var endHandler = function(evt){
                evt.preventDefault();

                //边界就翻页值
                var boundary = scaleW/6;

                //手指抬起的时间值
                var endTime = new Date() * 1;

                //所有列表项
                var lis = outer.getElementsByTagName('li');

                //当手指移动时间超过300ms 的时候，按位移算
                if(endTime - self.startTime > 300){
                    if(self.offsetX >= boundary){
                        self.goIndex('-1');
                    }else if(self.offsetX < 0 && self.offsetX < -boundary){
                        self.goIndex('+1');
                    }else{
                        self.goIndex('0');
                    }
                }else{
                    //优化
                    //快速移动也能使得翻页
                    if(self.offsetX > 50){
                        self.goIndex('-1');
                    }else if(self.offsetX < -50){
                        self.goIndex('+1');
                    }else{
                        self.goIndex('0');
                    }
                }
                //重置自动轮播
                self.stopSetInterval();
                self.startSetInterval(5000);
            };

            //绑定事件
            outer.addEventListener('touchstart', startHandler);
            outer.addEventListener('touchmove', moveHandler);
            outer.addEventListener('touchend', endHandler);
        };

        //定时轮播
        Slider.prototype.startSetInterval = function(time){
            if(!window.cache){window.cache={};}
            if(typeof time !== 'number' || time<100){
                time = 100;
            }
            var self = this;
            var lis = this.outer.getElementsByTagName('li');
            var len = lis.length;
            var go = '+1';
            window.cache.sliderSetIntervalId = setInterval(function(){
                if($('.picview_indextip>div.active').index()+1===len){
                    go = '-1';
                }else if($('.picview_indextip>div.active').index()===0){
                    go = '+1';
                }
                self.goIndex(go);
            },time);
        }
        //停止轮播
        Slider.prototype.stopSetInterval = function(){
            clearInterval(window.cache.sliderSetIntervalId);
        }

		$(function(){
			//初始化Slider 实例
			new Slider({
				dom : document.getElementById('canvas'),
				list : list
			});
		})
        
        </script>
        <div class="">
            
        </div>
        <div class="pure-g" id="homebtnlist">
            <div class="pure-u-1-4" onclick="javascript:window.open('{:U('w3g/Index/index')}','_self')"  data-index="0">
                <div class="square home-ico"></div>
                <div class="home-item-title">朋友圈</div>
            </div>
            <div class="pure-u-1-4" onclick="javascript:window.open('{:U('w3g/Weiba/index')}','_self')" data-index="1">
                <div class="square home-ico"></div>
                <div class="home-item-title">微吧</div>
            </div>
            <div class="pure-u-1-4" onclick="javascript:window.open('{:U('w3g/Channel/index')}','_self')" data-index="2">
                <div class="square home-ico"></div>
                <div class="home-item-title">频道</div>
            </div>
            <div class="pure-u-1-4" onclick="javascript:window.open('{:U('w3g/People/index')}','_self')"  data-index="4">
                <div class="square home-ico"></div>
                <div class="home-item-title">找伙伴</div>
            </div>
            <div class="pure-u-1-4" onclick="javascript:window.open('{:U('w3g/Public/discover')}','_self')" data-index="5">
                <div class="square home-ico"></div>
                <div class="home-item-title">发现</div>
            </div>
            <session name="mid">
            <div class="pure-u-1-4" onclick="javascript:window.open('{:U('w3g/Index/weibo', array('uid'=>$userInfo['uid']))}','_self')"  data-index="7">
                <div class="square home-ico"></div>
                <div class="home-item-title">我的</div>
            </div>
            <div class="pure-u-1-4" onclick="javascript:window.open('{:U('w3g/Public/sign_in')}','_self')"  data-index="6">
                <div class="square home-ico"></div>
                <div class="home-item-title">签到</div>
            </div>
            <div class="pure-u-1-4" onclick="javascript:window.open('{:U('w3g/Setting/index')}','_self')"  data-index="9">
                <div class="square home-ico"></div>
                <div class="home-item-title">设置</div>
            </div>
            </session>
            <nosession name="mid">
            <div class="pure-u-1-4" onclick="javascript:window.open('{:U('w3g/Setting/index')}','_self')"  data-index="9">
                <div class="square home-ico"></div>
                <div class="home-item-title">设置</div>
            </div>
            <div class="pure-u-1-4" onclick="javascript:window.open('{:U('w3g/Public/login')}','_self')"  data-index="12">
                <div class="square home-ico"></div>
                <div class="home-item-title">登录</div>
            </div>
            <div class="pure-u-1-4" onclick="javascript:window.open('{:U('w3g/Public/register')}','_self')"  data-index="11">
                <div class="square home-ico"></div>
                <div class="home-item-title">注册</div>
            </div>
            </nosession>
        </div>
        <script>
            var optimizeHomeList = function(){
                var pageWidth = $(document).width(),
                        size=0;
                $.each($('#homebtnlist div.pure-u-1-4'),function(index,item){
                    $(item).height(pageWidth/4);
                    $(item).css({
                        'padding-top':pageWidth/4*0.10
                    });
                    $(item).find('.home-ico').removeAttr('style');
                    size=Math.floor($(item).find('.home-ico').width());
                    $(item).find('.home-ico').css({
                        'width':size+'px',
                        'height':size+'px',
                        'background-position':'0 -'+size*Number($(item).data('index'))+'px'
                    });
                    if((index+1)%4===1){
                        $(item).css({
                            'border-left':0
                        });
                    }else if((index+1)%4===0){
                        $(item).css({
                            'border-left':0,
                            'border-right':0
                        });
                    }else{
                        $(item).css({
                            'border-left':0
                        });
                    }
                });
                $('.home-item-title').css({
                    'font-size':Math.floor(pageWidth/4*12/70)+'px'
                });
            }
            $(function(){
                optimizeHomeList();
            });
            $(window).resize(function() {
                optimizeHomeList();
            });
        </script>
    </div>

<script type="text/javascript">
$(document).ready(function(){

    // $(".main_visual").hover(function(){
    //     $("#btn_prev,#btn_next").fadeIn()
    // },function(){
    //     $("#btn_prev,#btn_next").fadeOut()
    // });
    $dragBln = false;
    
    $(".main_image").touchSlider({
        flexible : true,
        speed : 200,
        paging : $(".flicking_con i"),
        counter : function (e){
            $(".flicking_con i").removeClass("on").eq(e.current-1).addClass("on");
        }
    });
	$(".main_image").height(200);
	var oldonload = window.onload;
    window.onload = function(){
		oldonload && oldonload();
		$(".main_image").height($(".focus-img:first").height());
	}
});
</script>

    <include file="footer_public" />